import { Component, createRef } from 'react'

class Son extends Component {
  state = {
    age: 18,
  }
  test = () => {
    console.log(this)
  }
  getClick = () => {}
  render() {
    return (
      <div>
        <h2>儿子组件</h2>
        <button>zzz</button>
      </div>
    )
  }
}
class App extends Component {
  /**
   * 非受控组件：
   * 类似vue模板中使用的ref
   * 1. 可以获取html元素的dom对象
   * 2. 可以获取类组件的实例
   * 使用步骤：
   * 1. 导入createRef方法并创建一个ref对象
   * 2. 元素上通过：ref={ref对象}
   * 3. 通过：this.ref对象.current (dom对象 | 组件实例)
   */
  // 1. 创建h1元素的ref对象
  h1 = createRef()
  Son = createRef()
  getDom = () => {
    console.log('h1', this.h1)
    this.h1.current.style.border = '10px solid red'
  }
  getDom1 = () => {
    console.log(this.Son.current)
  }
  render() {
    return (
      <div>
        <h1 ref={this.h1}>非受控组件：</h1>
        <p>
          <button onClick={this.getDom}>获取h1的dom</button>
        </p>
        <hr />
        <Son ref={this.Son}></Son>
        <button onClick={this.getDom1}>获取h2的dom</button>
      </div>
    )
  }
}

export default App
